<template>
  <div class="zerotab">
    <div class="tab_box">
      <div class="row">
        <div class="row_box" v-for="(item,index) in tablist" :key="index" >
          <div class="row_item" :class="curact==index?'act':''" @click="active(item.cat,index)">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "zerotab",
  data () {
	  return {
		  curact: 0,
	  }
  },
  props: {
	tablist: {},
  },
  methods: {
    active(cat,index) {
		this.curact=index;
		this.$emit('mycat',cat)
	}
  }
};
</script>

sty

<style lang='scss' scoped>
$zerocolor: #d43c33;
.tab_box {
  width: 100vw;
  .row {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    // overflow: scroll;
    .row_box {
      width: 25vw;
      margin: 5px 0;
      .row_item {
        width: 80%;
        margin: 0 auto;
        white-space: nowrap;
        line-height: 30px;
        font-size: 12px;
        border-radius: 5px;
        border: 1px solid $zerocolor;
		color: $zerocolor;
      }
      .act{
		  background-color: $zerocolor;
		  color:#fff;
	  }
    }
  }
}
</style>